<template>
        <video class="video-player" :src="src" :poster="poster" controls width="100%" preload="metadata"
            @error="handleError"></video>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义接收的属性
const props = defineProps({
    src: {
        type: String,
        required: true
    },
    poster: {
        type: String,
        default: ''
    }
});

// 定义 emit 事件，用于处理视频错误
const emit = defineEmits(['error']);

// 处理视频加载错误
const handleError = (event) => {
    console.error('视频加载失败:', event);
    emit('error', event);
};
</script>

<style scoped>
.video-player {
    /* position: relative; */
    /* max-width: 100%; */
    /* margin: auto; */
    /* 添加一些基本样式，根据需要进行调整 */
    width: 100%;
    height: 100%;
}

video {
    width: 100%;
    /* 可以根据需要添加更多的样式 */
}
</style>